<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="Docutils 0.4: http://docutils.sourceforge.net/" />
<title></title>
<style type="text/css">

/*
:Author: David Goodger
:Contact: goodger@users.sourceforge.net
:Date: $Date$
:Revision: $Revision$
:Copyright: This stylesheet has been placed in the public domain.

Default cascading style sheet for the HTML output of Docutils.

See http://docutils.sf.net/docs/howto/html-stylesheets.html for how to
customize this style sheet.
*/

/* used to remove borders from tables and images */
.borderless, table.borderless td, table.borderless th {
  border: 0 }

table.borderless td, table.borderless th {
  /* Override padding for "table.docutils td" with "! important".
     The right padding separates the table cells. */
  padding: 0 0.5em 0 0 ! important }

.first {
  /* Override more specific margin styles with "! important". */
  margin-top: 0 ! important }

.last, .with-subtitle {
  margin-bottom: 0 ! important }

.hidden {
  display: none }

a.toc-backref {
  text-decoration: none ;
  color: black }

blockquote.epigraph {
  margin: 2em 5em ; }

dl.docutils dd {
  margin-bottom: 0.5em }

/* Uncomment (and remove this text!) to get bold-faced definition list terms
dl.docutils dt {
  font-weight: bold }
*/

div.abstract {
  margin: 2em 5em }

div.abstract p.topic-title {
  font-weight: bold ;
  text-align: center }

div.admonition, div.attention, div.caution, div.danger, div.error,
div.hint, div.important, div.note, div.tip, div.warning {
  margin: 2em ;
  border: medium outset ;
  padding: 1em }

div.admonition p.admonition-title, div.hint p.admonition-title,
div.important p.admonition-title, div.note p.admonition-title,
div.tip p.admonition-title {
  font-weight: bold ;
  font-family: sans-serif }

div.attention p.admonition-title, div.caution p.admonition-title,
div.danger p.admonition-title, div.error p.admonition-title,
div.warning p.admonition-title {
  color: red ;
  font-weight: bold ;
  font-family: sans-serif }

/* Uncomment (and remove this text!) to get reduced vertical space in
   compound paragraphs.
div.compound .compound-first, div.compound .compound-middle {
  margin-bottom: 0.5em }

div.compound .compound-last, div.compound .compound-middle {
  margin-top: 0.5em }
*/

div.dedication {
  margin: 2em 5em ;
  text-align: center ;
  font-style: italic }

div.dedication p.topic-title {
  font-weight: bold ;
  font-style: normal }

div.figure {
  margin-left: 2em ;
  margin-right: 2em }

div.footer, div.header {
  clear: both;
  font-size: smaller }

div.line-block {
  display: block ;
  margin-top: 1em ;
  margin-bottom: 1em }

div.line-block div.line-block {
  margin-top: 0 ;
  margin-bottom: 0 ;
  margin-left: 1.5em }

div.sidebar {
  margin-left: 1em ;
  border: medium outset ;
  padding: 1em ;
  background-color: #ffffee ;
  width: 40% ;
  float: right ;
  clear: right }

div.sidebar p.rubric {
  font-family: sans-serif ;
  font-size: medium }

div.system-messages {
  margin: 5em }

div.system-messages h1 {
  color: red }

div.system-message {
  border: medium outset ;
  padding: 1em }

div.system-message p.system-message-title {
  color: red ;
  font-weight: bold }

div.topic {
  margin: 2em }

h1.section-subtitle, h2.section-subtitle, h3.section-subtitle,
h4.section-subtitle, h5.section-subtitle, h6.section-subtitle {
  margin-top: 0.4em }

h1.title {
  text-align: center }

h2.subtitle {
  text-align: center }

hr.docutils {
  width: 75% }

img.align-left {
  clear: left }

img.align-right {
  clear: right }

ol.simple, ul.simple {
  margin-bottom: 1em }

ol.arabic {
  list-style: decimal }

ol.loweralpha {
  list-style: lower-alpha }

ol.upperalpha {
  list-style: upper-alpha }

ol.lowerroman {
  list-style: lower-roman }

ol.upperroman {
  list-style: upper-roman }

p.attribution {
  text-align: right ;
  margin-left: 50% }

p.caption {
  font-style: italic }

p.credits {
  font-style: italic ;
  font-size: smaller }

p.label {
  white-space: nowrap }

p.rubric {
  font-weight: bold ;
  font-size: larger ;
  color: maroon ;
  text-align: center }

p.sidebar-title {
  font-family: sans-serif ;
  font-weight: bold ;
  font-size: larger }

p.sidebar-subtitle {
  font-family: sans-serif ;
  font-weight: bold }

p.topic-title {
  font-weight: bold }

pre.address {
  margin-bottom: 0 ;
  margin-top: 0 ;
  font-family: serif ;
  font-size: 100% }

pre.literal-block, pre.doctest-block {
  margin-left: 2em ;
  margin-right: 2em ;
  background-color: #eeeeee }

span.classifier {
  font-family: sans-serif ;
  font-style: oblique }

span.classifier-delimiter {
  font-family: sans-serif ;
  font-weight: bold }

span.interpreted {
  font-family: sans-serif }

span.option {
  white-space: nowrap }

span.pre {
  white-space: pre }

span.problematic {
  color: red }

span.section-subtitle {
  /* font-size relative to parent (h1..h6 element) */
  font-size: 80% }

table.citation {
  border-left: solid 1px gray;
  margin-left: 1px }

table.docinfo {
  margin: 2em 4em }

table.docutils {
  margin-top: 0.5em ;
  margin-bottom: 0.5em }

table.footnote {
  border-left: solid 1px black;
  margin-left: 1px }

table.docutils td, table.docutils th,
table.docinfo td, table.docinfo th {
  padding-left: 0.5em ;
  padding-right: 0.5em ;
  vertical-align: top }

table.docutils th.field-name, table.docinfo th.docinfo-name {
  font-weight: bold ;
  text-align: left ;
  white-space: nowrap ;
  padding-left: 0 }

h1 tt.docutils, h2 tt.docutils, h3 tt.docutils,
h4 tt.docutils, h5 tt.docutils, h6 tt.docutils {
  font-size: 100% }

tt.docutils {
  background-color: #eeeeee }

ul.auto-toc {
  list-style-type: none }

</style>
</head>
<body>
<div class="document">
<p>&quot;&quot;&quot;</p>
<div class="section">
<h1><a class="toc-backref" href="#id1" id="fckeditor-django-connector" name="fckeditor-django-connector">FCKeditor Django Connector</a></h1>
<blockquote>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field"><th class="field-name">Author:</th><td class="field-body">Nathan R. Yergler &lt;<a class="reference" href="mailto:nathan&#64;yergler.net">nathan&#64;yergler.net</a>&gt;</td>
</tr>
<tr class="field"><th class="field-name">Copyright:</th><td class="field-body">2006</td>
</tr>
<tr class="field"><th class="field-name">License:</th><td class="field-body">GNU LGPL; see LICENSE for details.</td>
</tr>
<tr class="field"><th class="field-name">Version:</th><td class="field-body">$Rev$</td>
</tr>
<tr class="field"><th class="field-name">Updated:</th><td class="field-body">$Date: 2006-08-17 11:57:00 -0400 (Thu, 17 Aug 2006) $</td>
</tr>
</tbody>
</table>
</blockquote>
<div class="contents docindex topic">
<p class="topic-title first"><a id="document-index" name="document-index">Document Index</a></p>
<ul class="simple">
<li><a class="reference" href="#fckeditor-django-connector" id="id1" name="id1">FCKeditor Django Connector</a><ul>
<li><a class="reference" href="#overview" id="id2" name="id2">Overview</a></li>
<li><a class="reference" href="#dependencies" id="id3" name="id3">Dependencies</a></li>
<li><a class="reference" href="#usage" id="id4" name="id4">Usage</a><ul>
<li><a class="reference" href="#installing-the-application" id="id5" name="id5">Installing the Application</a></li>
<li><a class="reference" href="#connecting-the-urls" id="id6" name="id6">Connecting the URLs</a></li>
<li><a class="reference" href="#configuring-fckeditor" id="id7" name="id7">Configuring FCKeditor</a></li>
<li><a class="reference" href="#using-fckeditor-in-the-admin-interface" id="id8" name="id8">Using FCKeditor in the Admin interface</a></li>
</ul>
</li>
<li><a class="reference" href="#known-issues" id="id9" name="id9">Known Issues</a></li>
<li><a class="reference" href="#contact-information" id="id10" name="id10">Contact Information</a></li>
</ul>
</li>
</ul>
</div>
<div class="section">
<h2><a class="toc-backref" href="#id2" id="overview" name="overview">Overview</a></h2>
<blockquote>
<a class="reference" href="http://www.fckeditor.net">FCKeditor</a> is a Javascript-based rich text editor for web applications.  One
of the enhanced features it offers is a web-based browser for media
files stored on the server.  The browser relies on a server-side
<em>connector</em> to provide XML responses for commands.  FCKeditor includes
connectors for many server-side technologies, including a Python CGI
implementation.  However, when using FCKeditor in a <a class="reference" href="http://djangoproject.com">Django</a> application,
it is desirable to implement the connector within the Django process.  This
package provides a Django-based implementation of the FCKeditor
<a class="reference" href="http://wiki.fckeditor.net/Developer%27s_Guide/Participating/Server_Side_Integration#Browser">server side specification</a>.</blockquote>
</div>
<div class="section">
<h2><a class="toc-backref" href="#id3" id="dependencies" name="dependencies">Dependencies</a></h2>
<blockquote>
<p>The FCKeditor Connector relies on Django and <a class="reference" href="http://effbot.org/zone/element-index.htm">ElementTree</a>.  Note that if
you prefer to use <a class="reference" href="http://codespeak.net/lxml">lxml</a>, you can simply modify the import at the top
of <tt class="docutils literal"><span class="pre">views.py</span></tt> from:</p>
<pre class="literal-block">
from elementtree import ElementTree
</pre>
<p>to:</p>
<pre class="literal-block">
import lxml.etree as ElementTree
</pre>
</blockquote>
</div>
<div class="section">
<h2><a class="toc-backref" href="#id4" id="usage" name="usage">Usage</a></h2>
<blockquote>
To use the FCKeditor Connector you must install the connector as a Django
application in your project, connect the appropriate URLs, modify the
admin interface to use FCKeditor and finally update the FCKeditor
configuration to point to the connector.</blockquote>
<div class="section">
<h3><a class="toc-backref" href="#id5" id="installing-the-application" name="installing-the-application">Installing the Application</a></h3>
<blockquote>
<p>To install the application, simply place the <tt class="docutils literal"><span class="pre">fckeditor_connector</span></tt>
Python package in your project directory and add <tt class="docutils literal"><span class="pre">fckeditor_connector</span></tt>
to the <tt class="docutils literal"><span class="pre">INSTALLED_APPS</span></tt> setting in <tt class="docutils literal"><span class="pre">settings.py</span></tt>.</p>
<p>After installing the application you need to set two configuration
variables found in <tt class="docutils literal"><span class="pre">views.py</span></tt>.  <tt class="docutils literal"><span class="pre">BASE_PATH</span></tt> defines the base
file-system path for FCKeditor-browsable files.  Note that FCKeditor
expects that this directory will contain sub-directories for specific
file types.  For example, if <tt class="docutils literal"><span class="pre">BASE_PATH</span></tt> is set to <tt class="docutils literal"><span class="pre">/var/www/media</span></tt>,
FCKeditor expects that <tt class="docutils literal"><span class="pre">/var/www/media/Images</span></tt> will contain image files.
See the <a class="reference" href="http://wiki.fckeditor.net/Developer%27s_Guide/Participating/Server_Side_Integration#Browser">server side specification</a> for details on FCKeditor file paths.</p>
<p><tt class="docutils literal"><span class="pre">BASE_URL</span></tt> should contain the base URL for the files served.  This has
only been tested with files served from the same server URL as Django
(using the <cite>static files</cite> Django view for development).</p>
</blockquote>
</div>
<div class="section">
<h3><a class="toc-backref" href="#id6" id="connecting-the-urls" name="connecting-the-urls">Connecting the URLs</a></h3>
<blockquote>
<p>To enable the FCKeditor Connector URLs in your project, you can add
something like:</p>
<pre class="literal-block">
...

(r'^fckeditor_connector/', include('fckeditor_connector.urls')),

...
</pre>
<p>to your project <tt class="docutils literal"><span class="pre">urls.py</span></tt>.  If you want to use a different prefix, you'll
need to use that instead of <tt class="docutils literal"><span class="pre">fckeditor_connector</span></tt> when configuring
FCKeditor below.</p>
</blockquote>
</div>
<div class="section">
<h3><a class="toc-backref" href="#id7" id="configuring-fckeditor" name="configuring-fckeditor">Configuring FCKeditor</a></h3>
<blockquote>
<p>To enable FCKeditor to use the Django connector, you need to update
<tt class="docutils literal"><span class="pre">fckconfig.js</span></tt> to point to the connector.  The default FCKeditor
connector configuration is based on a standard URL schema.  Unfortunately
this does not work with the Django connector, so we have to specify a
complete URL.  In <tt class="docutils literal"><span class="pre">fckconfig.js</span></tt> you will find a block on configuration
parameters such as:</p>
<pre class="literal-block">
FCKConfig.ImageBrowser = true ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&amp;Connector=connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ;
FCKConfig.ImageBrowserWindowWidth  = FCKConfig.ScreenWidth * 0.7 ;   // 70% ;
FCKConfig.ImageBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ;  // 70% ;
</pre>
<p>Below this block add the following line:</p>
<pre class="literal-block">
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&amp;Connector=/fckeditor_connector/browser/';
</pre>
<p>Note that if you did not use the suggested URL prefix you will need to
modify this line.  In particular, the first portion of the <tt class="docutils literal"><span class="pre">Connector</span></tt>
query string parameter should contain the base URL provided in your project's
<tt class="docutils literal"><span class="pre">urls.py</span></tt>.</p>
</blockquote>
</div>
<div class="section">
<h3><a class="toc-backref" href="#id8" id="using-fckeditor-in-the-admin-interface" name="using-fckeditor-in-the-admin-interface">Using FCKeditor in the Admin interface</a></h3>
<blockquote>
<p>There are several ways to connect the FCKeditor to the Admin interface.  The
way we have tested with is to replace a specific <tt class="docutils literal"><span class="pre">textarea</span></tt>.  To use the
FCKeditor, you need to download FCKeditor and put it in a location
accessible by Django.  Currently we put this underneath the admin
media directory.  Once you have it accessible, you need to add the following
information to the <tt class="docutils literal"><span class="pre">Admin</span></tt> class of the appropriate model:</p>
<pre class="literal-block">
class Admin:
   # javascript for fck editor
   js = ( 'underlay/fckeditor/fckeditor.js',
          'underlay/news/story.js',
          )
</pre>
<p>In this case <tt class="docutils literal"><span class="pre">story.js</span></tt> is a small Javascript file which contains the
following:</p>
<pre class="literal-block">
window.onload = function()
{
    // create the FCK Editor and replace the specific text area with it
    var oFCKeditor = new FCKeditor( 'id_text' ) ;
    oFCKeditor.BasePath    = '/underlay/fckeditor/';
    oFCKeditor.ReplaceTextarea() ;
}
</pre>
<p>Note that <tt class="docutils literal"><span class="pre">id_text</span></tt> is the name of the TextField in your model prepended
with <tt class="docutils literal"><span class="pre">id</span></tt>.  The <tt class="docutils literal"><span class="pre">BasePath</span></tt> setting should reflect the absolute path you
used to make the FCKeditor files available.</p>
</blockquote>
</div>
</div>
<div class="section">
<h2><a class="toc-backref" href="#id9" id="known-issues" name="known-issues">Known Issues</a></h2>
<blockquote>
The Connector currently only implements File Browser Connector at this point.
The <a class="reference" href="http://wiki.fckeditor.net/Developer%27s_Guide/Participating/Server_Side_Integration#Upload">Quick Uploader</a> API will be implemented in the future.</blockquote>
</div>
<div class="section">
<h2><a class="toc-backref" href="#id10" id="contact-information" name="contact-information">Contact Information</a></h2>
<p>&quot;&quot;&quot;</p>
</div>
</div>
</div>
</body>
</html>
